<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例</title>
<!--    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>-->
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
        <!--
            指定一块区域,在这个区域中可以使用vue
        只有这个区域中的标签,才能使用vue数据绑定

        -->
        <div id="app">
            <!--将vue的视图中message绑定给div,可以使用插值表达式-->
            <div >{{message}}</div>
            <div>{{username}}</div>
            <div>{{[1,2,3,4][2]}}</div>
            <div>{{{"name":"老王","age":20}.age}}</div>
            <div>{{sayHello()}}</div>
        </div>
<script type="text/javascript">
    var  vue= new Vue({
        el:"#app",
        data:{
            message:"hello vue",
            username:"张三"
        },//数据类型
        methods:{
            sayHello:function () {
                return "hello vue1"
            }
        }
    });
</script>
</body>
</html>